{% extends "base.html" %}
{% block content %}
    <p style="color:white; text-align: center; font-family: 'Poppins-Light',sans-serif; border-radius: 5px">You Have <span style="font-size: 20px; color: red;"><strong>{{ files|length }}</strong></span> files</p>
    {% for file in files %}
        <div>
            <div class="file">
                {% if file.filetype=="image" %}
                    <img src="{{ url_for("download_file", file_id=file.id, mode="preview") }}" alt="picture" style="object-fit:scale-down; height:25px; width:25px">
                    <strong>{{ file.filename }}</strong>
                {% else %}
                    <img src="/static/images/file.png" alt="file" style="object-fit:scale-down; height:25px; width:25px">
                    <strong>{{ file.filename }}</strong>
                {% endif %}
                {% if file.filetype=="audio" %}
                    <div class="mus">
                        <audio src="{{ url_for("download_file", file_id=file.id, uid=1, mode="preview") }}" style="width:100%" controls></audio>
                    </div>
                {% endif %}
            </div>
            <a href="{{ url_for('download_file',file_id=file.id, mode="download") }}" class="ab">Download</a>
            <a href="{{ url_for("delete_file", file_id=file.id) }}" class="ab">Delete</a>
            <a onclick="copylink('/download/{{ file.id }}?mode=download&pwd={{ file.pwd }}', this)" class="ab">Copy Link</a>
        </div>
    {% endfor %}
    <script>
        window.onload = function (){
            document.getElementById("files").className="active";
        }
        function copyToClipboard(textToCopy) {
            // navigator clipboard 需要https等安全上下文
            if (navigator.clipboard && window.isSecureContext) {
                // navigator clipboard 向剪贴板写文本
                return navigator.clipboard.writeText(textToCopy);
            } else {
                // 创建text area
                let textArea = document.createElement("textarea");
                textArea.value = textToCopy;
                // 使text area不在viewport，同时设置不可见
                textArea.style.position = "absolute";
                textArea.style.opacity = 0;
                textArea.style.left = "-999999px";
                textArea.style.top = "-999999px";
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                return new Promise((res, rej) => {
                    // 执行复制命令并移除文本框
                    document.execCommand('copy') ? res() : rej();
                    textArea.remove();
                });
            }
        }
        function copylink(link, button){
            copyToClipboard("http://"+window.location.host+link);
            button.innerHTML = "Copied!";
            console.log(button.innerHTML);
            setTimeout(function(){
                button.innerHTML = "Copy Link";
            }, 2000)
        }
    </script>
{% endblock %}
{% block add %}
    <div class="container">
        <h1>Upload File</h1>
        <form method="POST" enctype="multipart/form-data">
            <div>
                <label for="file">File:</label>
                <input type="file" id="file" name="file" style="max-width: 100%" required>
                <br>
                <label for="pwd">Password:</label>
                <input id="pwd" type="password" name="pwd">
            </div>
            <button type="submit" style="margin-bottom: 10px">Upload</button>
        </form>
    </div>
{% endblock %}